<template>
  <v-app id="inspire" style="background-color:#eeeeee">
    <v-system-bar
            height="50"
            class="px-4"
            dark
            style="background-color: #247ba0"
    >
      <svg class="icon" aria-hidden="true" style="font-size: 24px">
        <use xlink:href="#icon-location"></use>
      </svg>
      <span class="headline">{{ basic.location }}</span>
      <span class="px-4" style="display:flex;flex-direction: column"
      ><span class="overline">上级城市:{{ basic.parent_city }}</span>
        <span class="overline">所属行政区域:{{ basic.admin_area }}</span></span
      >
      <span class="px-4" style="display:flex;flex-direction: column"
      ><span class="overline">纬度:{{ basic.lat }}</span>
        <span class="overline">经度:{{ basic.lon }}</span></span
      >
      <span class="px-4" style="display:flex;flex-direction: column"
      ><span class="overline">所属时区:{{ basic.tz }}</span>
        <span class="overline">城市代码:{{ basic.cid }}</span></span
      >
      <span class="ml-auto">{{ update.loc }}</span>
      <span class="px-2">更新</span>
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-refresh"></use>
      </svg>
    </v-system-bar>
    <v-row no-gutters id="ro" class="pa-4">
      <v-col cols="2">
        <v-hover v-slot:default="{ hover }">
          <v-card :elevation="hover ? 12 : 2" color="#247ba0" dark>
            <v-card-title>
              <svg class="icon" style="font-size: 30px" aria-hidden="true">
                <use xlink:href="#icon-now"></use>
              </svg>
              <span class="ml-4">实况</span></v-card-title
            >
            <v-divider></v-divider>
            <v-list-item class="mt-4"
            ><span class="display-1">{{ weather_now.tmp }}</span>
              <svg class="icon" style="font-size: 24px" aria-hidden="true">
                <use xlink:href="#icon-tmp"></use>
              </svg>
              <span class="subtitle-1 ml-4">{{ weather_now.cond_txt }}</span>
              <svg
                      class="icon ml-auto"
                      style="font-size: 50px"
                      aria-hidden="true"
              >
                <use xlink:href="#icon-riqing"></use>
              </svg>
            </v-list-item>
            <v-list-item
            ><span class="subtitle-2">体感温度 {{ weather_now.fl }}</span>
              <svg
                      class="icon ml-auto"
                      style="font-size: 20px"
                      aria-hidden="true"
              >
                <use xlink:href="#icon-qlty"></use>
              </svg>
              <span class="caption">{{ air_now.qlty }}</span>
              <svg class="icon ml-2" style="font-size: 20px" aria-hidden="true">
                <use xlink:href="#icon-aqi"></use>
              </svg>
              <span class="caption">{{ air_now.aqi }}</span></v-list-item
            >
            <v-divider></v-divider>
            <v-list-item class="my-4">
              <span
                      style="flex: 1;display: flex;flex-direction: column;text-align: center"
              ><svg
                      class="icon mx-auto"
                      style="font-size: 30px"
                      aria-hidden="true"
              >
                  <use xlink:href="#icon-pm25"></use></svg
              ><span class="caption">{{ air_now.pm25 }}</span></span
              >
              <span
                      style="flex: 1;display: flex;flex-direction: column;text-align: center"
              ><svg
                      class="icon mx-auto"
                      style="font-size: 30px"
                      aria-hidden="true"
              >
                  <use xlink:href="#icon-pm10"></use></svg
              ><span class="caption">{{ air_now.pm10 }}</span></span
              >
              <span
                      style="flex: 1;display: flex;flex-direction: column;text-align: center"
              ><svg
                      class="icon mx-auto"
                      style="font-size: 30px"
                      aria-hidden="true"
              >
                  <use xlink:href="#icon-main"></use></svg
              ><span class="caption">{{ air_now.main }}</span></span
              >
            </v-list-item>
            <v-list-item class="my-4">
              <span style="flex: 1"
              ><svg class="icon" style="font-size: 30px" aria-hidden="true">
                  <use xlink:href="#icon-co"></use></svg
              ><span class="ml-2 caption">{{ air_now.co }}</span></span
              >
              <span style="flex: 1"
              ><svg class="icon" style="font-size: 30px" aria-hidden="true">
                  <use xlink:href="#icon-so2"></use></svg
              ><span class="ml-2 caption">{{ air_now.so2 }}</span></span
              >
              <span style="flex: 1"
              ><svg class="icon" style="font-size: 30px" aria-hidden="true">
                  <use xlink:href="#icon-no2"></use></svg
              ><span class="ml-2 caption">{{ air_now.no2 }}</span></span
              >
            </v-list-item>
            <v-divider></v-divider>
            <v-list-item class="my-4">
              <span style="flex: 1"
              ><svg class="icon" style="font-size: 30px" aria-hidden="true">
                  <use xlink:href="#icon-wind_dir"></use></svg
              ><span class="ml-2 caption">{{
                  weather_now.wind_dir
                }}</span></span
              >
              <span style="flex: 1"
              ><svg class="icon" style="font-size: 30px" aria-hidden="true">
                  <use xlink:href="#icon-wind_deg"></use></svg
              ><span class="ml-2 caption">{{
                  weather_now.wind_deg
                }}</span></span
              >
              <span style="flex: 1"
              ><svg class="icon" style="font-size: 30px" aria-hidden="true">
                  <use xlink:href="#icon-wind_sc"></use></svg
              ><span class="ml-2 caption"
              >{{ weather_now.wind_sc }}级</span
              ></span
              >
            </v-list-item>
            <v-list-item class="my-4">
              <span style="flex: 1"
              ><svg class="icon" style="font-size: 30px" aria-hidden="true">
                  <use xlink:href="#icon-spd"></use></svg
              ><span class="ml-2 caption"
              >{{ weather_now.wind_spd }}m/s</span
              ></span
              >
              <span style="flex: 1"
              ><svg class="icon" style="font-size: 30px" aria-hidden="true">
                  <use xlink:href="#icon-hum"></use></svg
              ><span class="ml-2 caption">{{ weather_now.hum }}%</span></span
              >
              <span style="flex: 1"
              ><svg class="icon" style="font-size: 30px" aria-hidden="true">
                  <use xlink:href="#icon-pcpn"></use></svg
              ><span class="ml-2 caption"
              >{{ weather_now.pcpn }}级</span
              ></span
              >
            </v-list-item>
            <v-list-item class="my-4">
              <span style="flex: 1"
              ><svg class="icon" style="font-size: 30px" aria-hidden="true">
                  <use xlink:href="#icon-vis"></use></svg
              ><span class="ml-2 caption"
              >{{ weather_now.vis }}公里</span
              ></span
              >
              <span style="flex: 1"
              ><svg class="icon" style="font-size: 30px" aria-hidden="true">
                  <use xlink:href="#icon-cloud"></use></svg
              ><span class="ml-2 caption">{{ weather_now.cloud }}</span></span
              >
              <span style="flex: 1"
              ><svg class="icon" style="font-size: 30px" aria-hidden="true">
                  <use xlink:href="#icon-pres"></use></svg
              ><span class="ml-2 caption"
              >{{ weather_now.pres }}hPa</span
              ></span
              >
            </v-list-item>
            <v-divider></v-divider>
          </v-card>
        </v-hover>
        <v-card light v-for="(style, index) in lifestyle" :key="index">
          <v-card-title>{{ life[style.type] }}</v-card-title>
          <v-card-text>{{ style.txt }}</v-card-text>
        </v-card>
      </v-col>
      <v-col cols="10">
        <v-card class="ml-4">
          <v-card-title style="color:#ff1654">
            <svg
                    class="icon"
                    aria-hidden="true"
                    style="font-size: 24px;color:#ff1654"
            >
              <use xlink:href="#icon-daily"></use>
            </svg>
            七日预报
          </v-card-title>
          <v-list-item id="weather" style="height:200px"></v-list-item>
          <v-list-item
                  style="padding-left: 70px;padding-right: 70px;margin-top: 20px"
          >
            <v-card
                    outlined
                    style="flex: 1;margin-left: 5px;margin-bottom: 10px"
            >
              <v-list-item class="my-4 px-1">
                <span style="flex: 1"
                ><svg class="icon" style="font-size: 30px" aria-hidden="true">
                    <use xlink:href="#icon-sun"></use></svg
                ><span class="ml-2 caption">{{
                    daily_forecast[0].cond_txt_d
                  }}</span></span
                >
                <span style="flex: 1"
                ><svg class="icon" style="font-size: 30px" aria-hidden="true">
                    <use xlink:href="#icon-moon"></use></svg
                ><span class="ml-2 caption">{{
                    daily_forecast[0].cond_txt_n
                  }}</span></span
                >
              </v-list-item>
              <v-list-item class="my-4 px-1">
                <span style="flex: 1"
                ><svg class="icon" style="font-size: 30px" aria-hidden="true">
                    <use xlink:href="#icon-sr"></use></svg
                ><span class="ml-2 caption">{{
                    daily_forecast[0].sr
                  }}</span></span
                >
                <span style="flex: 1"
                ><svg class="icon" style="font-size: 30px" aria-hidden="true">
                    <use xlink:href="#icon-ss"></use></svg
                ><span class="ml-2 caption">{{
                    daily_forecast[0].ss
                  }}</span></span
                >
              </v-list-item>
              <v-list-item class="my-4 px-1">
                <span style="flex: 1"
                ><svg class="icon" style="font-size: 30px" aria-hidden="true">
                    <use xlink:href="#icon-mr"></use></svg
                ><span class="ml-2 caption">{{
                    daily_forecast[0].mr
                  }}</span></span
                >
                <span style="flex: 1"
                ><svg class="icon" style="font-size: 30px" aria-hidden="true">
                    <use xlink:href="#icon-ms"></use></svg
                ><span class="ml-2 caption">{{
                    daily_forecast[0].ms
                  }}</span></span
                >
              </v-list-item>
              <v-list-item class="my-4 px-1">
                <span style="flex: 1"
                ><svg class="icon" style="font-size: 30px" aria-hidden="true">
                    <use xlink:href="#icon-wind_dir"></use></svg
                ><span class="ml-2 caption">{{
                    daily_forecast[0].wind_dir
                  }}</span></span
                >
                <span style="flex: 1"
                ><svg class="icon" style="font-size: 30px" aria-hidden="true">
                    <use xlink:href="#icon-wind_deg"></use></svg
                ><span class="ml-2 caption"
                >{{ daily_forecast[0].wind_deg }}°</span
                ></span
                >
              </v-list-item>
              <v-list-item class="my-4 px-1">
                <span style="flex: 1"
                ><svg class="icon" style="font-size: 30px" aria-hidden="true">
                    <use xlink:href="#icon-wind_sc"></use></svg
                ><span class="ml-2 caption"
                >{{ daily_forecast[0].wind_sc }}级</span
                ></span
                >
                <span style="flex: 1"
                ><svg class="icon" style="font-size: 30px" aria-hidden="true">
                    <use xlink:href="#icon-spd"></use></svg
                ><span class="ml-1 caption"
                >{{ daily_forecast[0].wind_spd }}km/h</span
                ></span
                >
              </v-list-item>
              <v-list-item class="my-4 px-1">
                <span style="flex: 1"
                ><svg class="icon" style="font-size: 30px" aria-hidden="true">
                    <use xlink:href="#icon-hum"></use></svg
                ><span class="ml-2 caption"
                >{{ daily_forecast[0].hum }}%</span
                ></span
                >
                <span style="flex: 1"
                ><svg class="icon" style="font-size: 30px" aria-hidden="true">
                    <use xlink:href="#icon-pcpn"></use></svg
                ><span class="ml-2 caption">{{
                    daily_forecast[0].pcpn
                  }}</span></span
                >
              </v-list-item>
              <v-list-item class="my-4 px-1">
                <span style="flex: 1"
                ><svg class="icon" style="font-size: 30px" aria-hidden="true">
                    <use xlink:href="#icon-pop"></use></svg
                ><span class="ml-2 caption"
                >{{ daily_forecast[0].pop }}%</span
                ></span
                >
                <span style="flex: 1"
                ><svg class="icon" style="font-size: 30px" aria-hidden="true">
                    <use xlink:href="#icon-pres"></use></svg
                ><span class="ml-2 caption"
                >{{ daily_forecast[0].pres }}hPa</span
                ></span
                >
              </v-list-item>
              <v-list-item class="my-4 px-1">
                <span style="flex: 1"
                ><svg class="icon" style="font-size: 30px" aria-hidden="true">
                    <use xlink:href="#icon-uv_index"></use></svg
                ><span class="ml-2 caption">{{
                    daily_forecast[0].uv_index
                  }}</span></span
                >
                <span style="flex: 1"
                ><svg class="icon" style="font-size: 30px" aria-hidden="true">
                    <use xlink:href="#icon-vis"></use></svg
                ><span class="ml-2 caption"
                >{{ daily_forecast[0].vis }}公里</span
                ></span
                >
              </v-list-item>
            </v-card>
            <v-card
                    outlined
                    style="flex: 1;margin-left: 5px;margin-bottom: 10px"
            >
              <v-list-item class="my-4 px-1">
                <span style="flex: 1"
                ><svg class="icon" style="font-size: 30px" aria-hidden="true">
                    <use xlink:href="#icon-sun"></use></svg
                ><span class="ml-2 caption">{{
                    daily_forecast[1].cond_txt_d
                  }}</span></span
                >
                <span style="flex: 1"
                ><svg class="icon" style="font-size: 30px" aria-hidden="true">
                    <use xlink:href="#icon-moon"></use></svg
                ><span class="ml-2 caption">{{
                    daily_forecast[1].cond_txt_n
                  }}</span></span
                >
              </v-list-item>
              <v-list-item class="my-4 px-1">
                <span style="flex: 1"
                ><svg class="icon" style="font-size: 30px" aria-hidden="true">
                    <use xlink:href="#icon-sr"></use></svg
                ><span class="ml-2 caption">{{
                    daily_forecast[1].sr
                  }}</span></span
                >
                <span style="flex: 1"
                ><svg class="icon" style="font-size: 30px" aria-hidden="true">
                    <use xlink:href="#icon-ss"></use></svg
                ><span class="ml-2 caption">{{
                    daily_forecast[1].ss
                  }}</span></span
                >
              </v-list-item>
              <v-list-item class="my-4 px-1">
                <span style="flex: 1"
                ><svg class="icon" style="font-size: 30px" aria-hidden="true">
                    <use xlink:href="#icon-mr"></use></svg
                ><span class="ml-2 caption">{{
                    daily_forecast[1].mr
                  }}</span></span
                >
                <span style="flex: 1"
                ><svg class="icon" style="font-size: 30px" aria-hidden="true">
                    <use xlink:href="#icon-ms"></use></svg
                ><span class="ml-2 caption">{{
                    daily_forecast[1].ms
                  }}</span></span
                >
              </v-list-item>
              <v-list-item class="my-4 px-1">
                <span style="flex: 1"
                ><svg class="icon" style="font-size: 30px" aria-hidden="true">
                    <use xlink:href="#icon-wind_dir"></use></svg
                ><span class="ml-2 caption">{{
                    daily_forecast[1].wind_dir
                  }}</span></span
                >
                <span style="flex: 1"
                ><svg class="icon" style="font-size: 30px" aria-hidden="true">
                    <use xlink:href="#icon-wind_deg"></use></svg
                ><span class="ml-2 caption"
                >{{ daily_forecast[1].wind_deg }}°</span
                ></span
                >
              </v-list-item>
              <v-list-item class="my-4 px-1">
                <span style="flex: 1"
                ><svg class="icon" style="font-size: 30px" aria-hidden="true">
                    <use xlink:href="#icon-wind_sc"></use></svg
                ><span class="ml-2 caption"
                >{{ daily_forecast[1].wind_sc }}级</span
                ></span
                >
                <span style="flex: 1"
                ><svg class="icon" style="font-size: 30px" aria-hidden="true">
                    <use xlink:href="#icon-spd"></use></svg
                ><span class="ml-1 caption"
                >{{ daily_forecast[1].wind_spd }}km/h</span
                ></span
                >
              </v-list-item>
              <v-list-item class="my-4 px-1">
                <span style="flex: 1"
                ><svg class="icon" style="font-size: 30px" aria-hidden="true">
                    <use xlink:href="#icon-hum"></use></svg
                ><span class="ml-2 caption"
                >{{ daily_forecast[1].hum }}%</span
                ></span
                >
                <span style="flex: 1"
                ><svg class="icon" style="font-size: 30px" aria-hidden="true">
                    <use xlink:href="#icon-pcpn"></use></svg
                ><span class="ml-2 caption">{{
                    daily_forecast[1].pcpn
                  }}</span></span
                >
              </v-list-item>
              <v-list-item class="my-4 px-1">
                <span style="flex: 1"
                ><svg class="icon" style="font-size: 30px" aria-hidden="true">
                    <use xlink:href="#icon-pop"></use></svg
                ><span class="ml-2 caption"
                >{{ daily_forecast[1].pop }}%</span
                ></span
                >
                <span style="flex: 1"
                ><svg class="icon" style="font-size: 30px" aria-hidden="true">
                    <use xlink:href="#icon-pres"></use></svg
                ><span class="ml-1 caption"
                >{{ daily_forecast[1].pres }}hPa</span
                ></span
                >
              </v-list-item>
              <v-list-item class="my-4 px-1">
                <span style="flex: 1"
                ><svg class="icon" style="font-size: 30px" aria-hidden="true">
                    <use xlink:href="#icon-uv_index"></use></svg
                ><span class="ml-2 caption">{{
                    daily_forecast[1].uv_index
                  }}</span></span
                >
                <span style="flex: 1"
                ><svg class="icon" style="font-size: 30px" aria-hidden="true">
                    <use xlink:href="#icon-vis"></use></svg
                ><span class="ml-2 caption"
                >{{ daily_forecast[1].vis }}公里</span
                ></span
                >
              </v-list-item>
            </v-card>
            <v-card
                    outlined
                    style="flex: 1;margin-left: 5px;margin-bottom: 10px"
            >
              <v-list-item class="my-4 px-1">
                <span style="flex: 1"
                ><svg class="icon" style="font-size: 30px" aria-hidden="true">
                    <use xlink:href="#icon-sun"></use></svg
                ><span class="ml-2 caption">{{
                    daily_forecast[2].cond_txt_d
                  }}</span></span
                >
                <span style="flex: 1"
                ><svg class="icon" style="font-size: 30px" aria-hidden="true">
                    <use xlink:href="#icon-moon"></use></svg
                ><span class="ml-2 caption">{{
                    daily_forecast[2].cond_txt_n
                  }}</span></span
                >
              </v-list-item>
              <v-list-item class="my-4 px-1">
                <span style="flex: 1"
                ><svg class="icon" style="font-size: 30px" aria-hidden="true">
                    <use xlink:href="#icon-sr"></use></svg
                ><span class="ml-2 caption">{{
                    daily_forecast[2].sr
                  }}</span></span
                >
                <span style="flex: 1"
                ><svg class="icon" style="font-size: 30px" aria-hidden="true">
                    <use xlink:href="#icon-ss"></use></svg
                ><span class="ml-2 caption">{{
                    daily_forecast[2].ss
                  }}</span></span
                >
              </v-list-item>
              <v-list-item class="my-4 px-1">
                <span style="flex: 1"
                ><svg class="icon" style="font-size: 30px" aria-hidden="true">
                    <use xlink:href="#icon-mr"></use></svg
                ><span class="ml-2 caption">{{
                    daily_forecast[2].mr
                  }}</span></span
                >
                <span style="flex: 1"
                ><svg class="icon" style="font-size: 30px" aria-hidden="true">
                    <use xlink:href="#icon-ms"></use></svg
                ><span class="ml-2 caption">{{
                    daily_forecast[2].ms
                  }}</span></span
                >
              </v-list-item>
              <v-list-item class="my-4 px-1">
                <span style="flex: 1"
                ><svg class="icon" style="font-size: 30px" aria-hidden="true">
                    <use xlink:href="#icon-wind_dir"></use></svg
                ><span class="ml-2 caption">{{
                    daily_forecast[2].wind_dir
                  }}</span></span
                >
                <span style="flex: 1"
                ><svg class="icon" style="font-size: 30px" aria-hidden="true">
                    <use xlink:href="#icon-wind_deg"></use></svg
                ><span class="ml-2 caption"
                >{{ daily_forecast[2].wind_deg }}°</span
                ></span
                >
              </v-list-item>
              <v-list-item class="my-4 px-1">
                <span style="flex: 1"
                ><svg class="icon" style="font-size: 30px" aria-hidden="true">
                    <use xlink:href="#icon-wind_sc"></use></svg
                ><span class="ml-2 caption"
                >{{ daily_forecast[2].wind_sc }}级</span
                ></span
                >
                <span style="flex: 1"
                ><svg class="icon" style="font-size: 30px" aria-hidden="true">
                    <use xlink:href="#icon-spd"></use></svg
                ><span class="ml-1 caption"
                >{{ daily_forecast[2].wind_spd }}km/h</span
                ></span
                >
              </v-list-item>
              <v-list-item class="my-4 px-1">
                <span style="flex: 1"
                ><svg class="icon" style="font-size: 30px" aria-hidden="true">
                    <use xlink:href="#icon-hum"></use></svg
                ><span class="ml-2 caption"
                >{{ daily_forecast[2].hum }}%</span
                ></span
                >
                <span style="flex: 1"
                ><svg class="icon" style="font-size: 30px" aria-hidden="true">
                    <use xlink:href="#icon-pcpn"></use></svg
                ><span class="ml-2 caption">{{
                    daily_forecast[2].pcpn
                  }}</span></span
                >
              </v-list-item>
              <v-list-item class="my-4 px-1">
                <span style="flex: 1"
                ><svg class="icon" style="font-size: 30px" aria-hidden="true">
                    <use xlink:href="#icon-pop"></use></svg
                ><span class="ml-2 caption"
                >{{ daily_forecast[2].pop }}%</span
                ></span
                >
                <span style="flex: 1"
                ><svg class="icon" style="font-size: 30px" aria-hidden="true">
                    <use xlink:href="#icon-pres"></use></svg
                ><span class="ml-1 caption"
                >{{ daily_forecast[2].pres }}hPa</span
                ></span
                >
              </v-list-item>
              <v-list-item class="my-4 px-1">
                <span style="flex: 1"
                ><svg class="icon" style="font-size: 30px" aria-hidden="true">
                    <use xlink:href="#icon-uv_index"></use></svg
                ><span class="ml-2 caption">{{
                    daily_forecast[2].uv_index
                  }}</span></span
                >
                <span style="flex: 1"
                ><svg class="icon" style="font-size: 30px" aria-hidden="true">
                    <use xlink:href="#icon-vis"></use></svg
                ><span class="ml-2 caption"
                >{{ daily_forecast[2].vis }}公里</span
                ></span
                >
              </v-list-item>
            </v-card>
            <v-card
                    outlined
                    style="flex: 1;margin-left: 5px;margin-bottom: 10px"
            >
              <v-list-item class="my-4 px-1">
                <span style="flex: 1"
                ><svg class="icon" style="font-size: 30px" aria-hidden="true">
                    <use xlink:href="#icon-sun"></use></svg
                ><span class="ml-2 caption">{{
                    daily_forecast[3].cond_txt_d
                  }}</span></span
                >
                <span style="flex: 1"
                ><svg class="icon" style="font-size: 30px" aria-hidden="true">
                    <use xlink:href="#icon-moon"></use></svg
                ><span class="ml-2 caption">{{
                    daily_forecast[3].cond_txt_n
                  }}</span></span
                >
              </v-list-item>
              <v-list-item class="my-4 px-1">
                <span style="flex: 1"
                ><svg class="icon" style="font-size: 30px" aria-hidden="true">
                    <use xlink:href="#icon-sr"></use></svg
                ><span class="ml-2 caption">{{
                    daily_forecast[3].sr
                  }}</span></span
                >
                <span style="flex: 1"
                ><svg class="icon" style="font-size: 30px" aria-hidden="true">
                    <use xlink:href="#icon-ss"></use></svg
                ><span class="ml-2 caption">{{
                    daily_forecast[3].ss
                  }}</span></span
                >
              </v-list-item>
              <v-list-item class="my-4 px-1">
                <span style="flex: 1"
                ><svg class="icon" style="font-size: 30px" aria-hidden="true">
                    <use xlink:href="#icon-mr"></use></svg
                ><span class="ml-2 caption">{{
                    daily_forecast[3].mr
                  }}</span></span
                >
                <span style="flex: 1"
                ><svg class="icon" style="font-size: 30px" aria-hidden="true">
                    <use xlink:href="#icon-ms"></use></svg
                ><span class="ml-2 caption">{{
                    daily_forecast[3].ms
                  }}</span></span
                >
              </v-list-item>
              <v-list-item class="my-4 px-1">
                <span style="flex: 1"
                ><svg class="icon" style="font-size: 30px" aria-hidden="true">
                    <use xlink:href="#icon-wind_dir"></use></svg
                ><span class="ml-2 caption">{{
                    daily_forecast[3].wind_dir
                  }}</span></span
                >
                <span style="flex: 1"
                ><svg class="icon" style="font-size: 30px" aria-hidden="true">
                    <use xlink:href="#icon-wind_deg"></use></svg
                ><span class="ml-2 caption"
                >{{ daily_forecast[3].wind_deg }}°</span
                ></span
                >
              </v-list-item>
              <v-list-item class="my-4 px-1">
                <span style="flex: 1"
                ><svg class="icon" style="font-size: 30px" aria-hidden="true">
                    <use xlink:href="#icon-wind_sc"></use></svg
                ><span class="ml-2 caption"
                >{{ daily_forecast[3].wind_sc }}级</span
                ></span
                >
                <span style="flex: 1"
                ><svg class="icon" style="font-size: 30px" aria-hidden="true">
                    <use xlink:href="#icon-spd"></use></svg
                ><span class="ml-1 caption"
                >{{ daily_forecast[3].wind_spd }}km/h</span
                ></span
                >
              </v-list-item>
              <v-list-item class="my-4 px-1">
                <span style="flex: 1"
                ><svg class="icon" style="font-size: 30px" aria-hidden="true">
                    <use xlink:href="#icon-hum"></use></svg
                ><span class="ml-2 caption"
                >{{ daily_forecast[3].hum }}%</span
                ></span
                >
                <span style="flex: 1"
                ><svg class="icon" style="font-size: 30px" aria-hidden="true">
                    <use xlink:href="#icon-pcpn"></use></svg
                ><span class="ml-2 caption">{{
                    daily_forecast[3].pcpn
                  }}</span></span
                >
              </v-list-item>
              <v-list-item class="my-4 px-1">
                <span style="flex: 1"
                ><svg class="icon" style="font-size: 30px" aria-hidden="true">
                    <use xlink:href="#icon-pop"></use></svg
                ><span class="ml-2 caption"
                >{{ daily_forecast[3].pop }}%</span
                ></span
                >
                <span style="flex: 1"
                ><svg class="icon" style="font-size: 30px" aria-hidden="true">
                    <use xlink:href="#icon-pres"></use></svg
                ><span class="ml-1 caption"
                >{{ daily_forecast[3].pres }}hPa</span
                ></span
                >
              </v-list-item>
              <v-list-item class="my-4 px-1">
                <span style="flex: 1"
                ><svg class="icon" style="font-size: 30px" aria-hidden="true">
                    <use xlink:href="#icon-uv_index"></use></svg
                ><span class="ml-2 caption">{{
                    daily_forecast[3].uv_index
                  }}</span></span
                >
                <span style="flex: 1"
                ><svg class="icon" style="font-size: 30px" aria-hidden="true">
                    <use xlink:href="#icon-vis"></use></svg
                ><span class="ml-2 caption"
                >{{ daily_forecast[3].vis }}公里</span
                ></span
                >
              </v-list-item>
            </v-card>
            <v-card
                    outlined
                    style="flex: 1;margin-left: 5px;margin-bottom: 10px"
            >
              <v-list-item class="my-4 px-1">
                <span style="flex: 1"
                ><svg class="icon" style="font-size: 30px" aria-hidden="true">
                    <use xlink:href="#icon-sun"></use></svg
                ><span class="ml-2 caption">{{
                    daily_forecast[4].cond_txt_d
                  }}</span></span
                >
                <span style="flex: 1"
                ><svg class="icon" style="font-size: 30px" aria-hidden="true">
                    <use xlink:href="#icon-moon"></use></svg
                ><span class="ml-2 caption">{{
                    daily_forecast[4].cond_txt_n
                  }}</span></span
                >
              </v-list-item>
              <v-list-item class="my-4 px-1">
                <span style="flex: 1"
                ><svg class="icon" style="font-size: 30px" aria-hidden="true">
                    <use xlink:href="#icon-sr"></use></svg
                ><span class="ml-2 caption">{{
                    daily_forecast[4].sr
                  }}</span></span
                >
                <span style="flex: 1"
                ><svg class="icon" style="font-size: 30px" aria-hidden="true">
                    <use xlink:href="#icon-ss"></use></svg
                ><span class="ml-2 caption">{{
                    daily_forecast[4].ss
                  }}</span></span
                >
              </v-list-item>
              <v-list-item class="my-4 px-1">
                <span style="flex: 1"
                ><svg class="icon" style="font-size: 30px" aria-hidden="true">
                    <use xlink:href="#icon-mr"></use></svg
                ><span class="ml-2 caption">{{
                    daily_forecast[4].mr
                  }}</span></span
                >
                <span style="flex: 1"
                ><svg class="icon" style="font-size: 30px" aria-hidden="true">
                    <use xlink:href="#icon-ms"></use></svg
                ><span class="ml-2 caption">{{
                    daily_forecast[4].ms
                  }}</span></span
                >
              </v-list-item>
              <v-list-item class="my-4 px-1">
                <span style="flex: 1"
                ><svg class="icon" style="font-size: 30px" aria-hidden="true">
                    <use xlink:href="#icon-wind_dir"></use></svg
                ><span class="ml-2 caption">{{
                    daily_forecast[4].wind_dir
                  }}</span></span
                >
                <span style="flex: 1"
                ><svg class="icon" style="font-size: 30px" aria-hidden="true">
                    <use xlink:href="#icon-wind_deg"></use></svg
                ><span class="ml-2 caption"
                >{{ daily_forecast[4].wind_deg }}°</span
                ></span
                >
              </v-list-item>
              <v-list-item class="my-4 px-1">
                <span style="flex: 1"
                ><svg class="icon" style="font-size: 30px" aria-hidden="true">
                    <use xlink:href="#icon-wind_sc"></use></svg
                ><span class="ml-2 caption"
                >{{ daily_forecast[4].wind_sc }}级</span
                ></span
                >
                <span style="flex: 1"
                ><svg class="icon" style="font-size: 30px" aria-hidden="true">
                    <use xlink:href="#icon-spd"></use></svg
                ><span class="ml-1 caption"
                >{{ daily_forecast[4].wind_spd }}km/h</span
                ></span
                >
              </v-list-item>
              <v-list-item class="my-4 px-1">
                <span style="flex: 1"
                ><svg class="icon" style="font-size: 30px" aria-hidden="true">
                    <use xlink:href="#icon-hum"></use></svg
                ><span class="ml-2 caption"
                >{{ daily_forecast[4].hum }}%</span
                ></span
                >
                <span style="flex: 1"
                ><svg class="icon" style="font-size: 30px" aria-hidden="true">
                    <use xlink:href="#icon-pcpn"></use></svg
                ><span class="ml-2 caption">{{
                    daily_forecast[4].pcpn
                  }}</span></span
                >
              </v-list-item>
              <v-list-item class="my-4 px-1">
                <span style="flex: 1"
                ><svg class="icon" style="font-size: 30px" aria-hidden="true">
                    <use xlink:href="#icon-pop"></use></svg
                ><span class="ml-2 caption"
                >{{ daily_forecast[4].pop }}%</span
                ></span
                >
                <span style="flex: 1"
                ><svg class="icon" style="font-size: 30px" aria-hidden="true">
                    <use xlink:href="#icon-pres"></use></svg
                ><span class="ml-1 caption"
                >{{ daily_forecast[4].pres }}hPa</span
                ></span
                >
              </v-list-item>
              <v-list-item class="my-4 px-1">
                <span style="flex: 1"
                ><svg class="icon" style="font-size: 30px" aria-hidden="true">
                    <use xlink:href="#icon-uv_index"></use></svg
                ><span class="ml-2 caption">{{
                    daily_forecast[4].uv_index
                  }}</span></span
                >
                <span style="flex: 1"
                ><svg class="icon" style="font-size: 30px" aria-hidden="true">
                    <use xlink:href="#icon-vis"></use></svg
                ><span class="ml-2 caption"
                >{{ daily_forecast[4].vis }}公里</span
                ></span
                >
              </v-list-item>
            </v-card>
            <v-card
                    outlined
                    style="flex: 1;margin-left: 5px;margin-bottom: 10px"
            >
              <v-list-item class="my-4 px-1">
                <span style="flex: 1"
                ><svg class="icon" style="font-size: 30px" aria-hidden="true">
                    <use xlink:href="#icon-sun"></use></svg
                ><span class="ml-2 caption">{{
                    daily_forecast[1].cond_txt_d
                  }}</span></span
                >
                <span style="flex: 1"
                ><svg class="icon" style="font-size: 30px" aria-hidden="true">
                    <use xlink:href="#icon-moon"></use></svg
                ><span class="ml-2 caption">{{
                    daily_forecast[1].cond_txt_n
                  }}</span></span
                >
              </v-list-item>
              <v-list-item class="my-4 px-1">
                <span style="flex: 1"
                ><svg class="icon" style="font-size: 30px" aria-hidden="true">
                    <use xlink:href="#icon-sr"></use></svg
                ><span class="ml-2 caption">{{
                    daily_forecast[5].sr
                  }}</span></span
                >
                <span style="flex: 1"
                ><svg class="icon" style="font-size: 30px" aria-hidden="true">
                    <use xlink:href="#icon-ss"></use></svg
                ><span class="ml-2 caption">{{
                    daily_forecast[5].ss
                  }}</span></span
                >
              </v-list-item>
              <v-list-item class="my-4 px-1">
                <span style="flex: 1"
                ><svg class="icon" style="font-size: 30px" aria-hidden="true">
                    <use xlink:href="#icon-mr"></use></svg
                ><span class="ml-2 caption">{{
                    daily_forecast[5].mr
                  }}</span></span
                >
                <span style="flex: 1"
                ><svg class="icon" style="font-size: 30px" aria-hidden="true">
                    <use xlink:href="#icon-ms"></use></svg
                ><span class="ml-2 caption">{{
                    daily_forecast[5].ms
                  }}</span></span
                >
              </v-list-item>
              <v-list-item class="my-4 px-1">
                <span style="flex: 1"
                ><svg class="icon" style="font-size: 30px" aria-hidden="true">
                    <use xlink:href="#icon-wind_dir"></use></svg
                ><span class="ml-2 caption">{{
                    daily_forecast[5].wind_dir
                  }}</span></span
                >
                <span style="flex: 1"
                ><svg class="icon" style="font-size: 30px" aria-hidden="true">
                    <use xlink:href="#icon-wind_deg"></use></svg
                ><span class="ml-2 caption"
                >{{ daily_forecast[5].wind_deg }}°</span
                ></span
                >
              </v-list-item>
              <v-list-item class="my-4 px-1">
                <span style="flex: 1"
                ><svg class="icon" style="font-size: 30px" aria-hidden="true">
                    <use xlink:href="#icon-wind_sc"></use></svg
                ><span class="ml-2 caption"
                >{{ daily_forecast[5].wind_sc }}级</span
                ></span
                >
                <span style="flex: 1"
                ><svg class="icon" style="font-size: 30px" aria-hidden="true">
                    <use xlink:href="#icon-spd"></use></svg
                ><span class="ml-1 caption"
                >{{ daily_forecast[5].wind_spd }}km/h</span
                ></span
                >
              </v-list-item>
              <v-list-item class="my-4 px-1">
                <span style="flex: 1"
                ><svg class="icon" style="font-size: 30px" aria-hidden="true">
                    <use xlink:href="#icon-hum"></use></svg
                ><span class="ml-2 caption"
                >{{ daily_forecast[5].hum }}%</span
                ></span
                >
                <span style="flex: 1"
                ><svg class="icon" style="font-size: 30px" aria-hidden="true">
                    <use xlink:href="#icon-pcpn"></use></svg
                ><span class="ml-2 caption">{{
                    daily_forecast[5].pcpn
                  }}</span></span
                >
              </v-list-item>
              <v-list-item class="my-4 px-1">
                <span style="flex: 1"
                ><svg class="icon" style="font-size: 30px" aria-hidden="true">
                    <use xlink:href="#icon-pop"></use></svg
                ><span class="ml-2 caption"
                >{{ daily_forecast[5].pop }}%</span
                ></span
                >
                <span style="flex: 1"
                ><svg class="icon" style="font-size: 30px" aria-hidden="true">
                    <use xlink:href="#icon-pres"></use></svg
                ><span class="ml-1 caption"
                >{{ daily_forecast[5].pres }}hPa</span
                ></span
                >
              </v-list-item>
              <v-list-item class="my-4 px-1">
                <span style="flex: 1"
                ><svg class="icon" style="font-size: 30px" aria-hidden="true">
                    <use xlink:href="#icon-uv_index"></use></svg
                ><span class="ml-2 caption">{{
                    daily_forecast[5].uv_index
                  }}</span></span
                >
                <span style="flex: 1"
                ><svg class="icon" style="font-size: 30px" aria-hidden="true">
                    <use xlink:href="#icon-vis"></use></svg
                ><span class="ml-2 caption"
                >{{ daily_forecast[5].vis }}公里</span
                ></span
                >
              </v-list-item>
            </v-card>
            <v-card
                    outlined
                    style="flex: 1;margin-left: 5px;margin-bottom: 10px"
            >
              <v-list-item class="my-4 px-1">
                <span style="flex: 1"
                ><svg class="icon" style="font-size: 30px" aria-hidden="true">
                    <use xlink:href="#icon-sun"></use></svg
                ><span class="ml-2 caption">{{
                    daily_forecast[6].cond_txt_d
                  }}</span></span
                >
                <span style="flex: 1"
                ><svg class="icon" style="font-size: 30px" aria-hidden="true">
                    <use xlink:href="#icon-moon"></use></svg
                ><span class="ml-2 caption">{{
                    daily_forecast[6].cond_txt_n
                  }}</span></span
                >
              </v-list-item>
              <v-list-item class="my-4 px-1">
                <span style="flex: 1"
                ><svg class="icon" style="font-size: 30px" aria-hidden="true">
                    <use xlink:href="#icon-sr"></use></svg
                ><span class="ml-2 caption">{{
                    daily_forecast[6].sr
                  }}</span></span
                >
                <span style="flex: 1"
                ><svg class="icon" style="font-size: 30px" aria-hidden="true">
                    <use xlink:href="#icon-ss"></use></svg
                ><span class="ml-2 caption">{{
                    daily_forecast[6].ss
                  }}</span></span
                >
              </v-list-item>
              <v-list-item class="my-4 px-1">
                <span style="flex: 1"
                ><svg class="icon" style="font-size: 30px" aria-hidden="true">
                    <use xlink:href="#icon-mr"></use></svg
                ><span class="ml-2 caption">{{
                    daily_forecast[6].mr
                  }}</span></span
                >
                <span style="flex: 1"
                ><svg class="icon" style="font-size: 30px" aria-hidden="true">
                    <use xlink:href="#icon-ms"></use></svg
                ><span class="ml-2 caption">{{
                    daily_forecast[6].ms
                  }}</span></span
                >
              </v-list-item>
              <v-list-item class="my-4 px-1">
                <span style="flex: 1"
                ><svg class="icon" style="font-size: 30px" aria-hidden="true">
                    <use xlink:href="#icon-wind_dir"></use></svg
                ><span class="ml-2 caption">{{
                    daily_forecast[6].wind_dir
                  }}</span></span
                >
                <span style="flex: 1"
                ><svg class="icon" style="font-size: 30px" aria-hidden="true">
                    <use xlink:href="#icon-wind_deg"></use></svg
                ><span class="ml-2 caption"
                >{{ daily_forecast[6].wind_deg }}°</span
                ></span
                >
              </v-list-item>
              <v-list-item class="my-4 px-1">
                <span style="flex: 1"
                ><svg class="icon" style="font-size: 30px" aria-hidden="true">
                    <use xlink:href="#icon-wind_sc"></use></svg
                ><span class="ml-2 caption"
                >{{ daily_forecast[6].wind_sc }}级</span
                ></span
                >
                <span style="flex: 1"
                ><svg class="icon" style="font-size: 30px" aria-hidden="true">
                    <use xlink:href="#icon-spd"></use></svg
                ><span class="ml-1 caption"
                >{{ daily_forecast[6].wind_spd }}km/h</span
                ></span
                >
              </v-list-item>
              <v-list-item class="my-4 px-1">
                <span style="flex: 1"
                ><svg class="icon" style="font-size: 30px" aria-hidden="true">
                    <use xlink:href="#icon-hum"></use></svg
                ><span class="ml-2 caption"
                >{{ daily_forecast[6].hum }}%</span
                ></span
                >
                <span style="flex: 1"
                ><svg class="icon" style="font-size: 30px" aria-hidden="true">
                    <use xlink:href="#icon-pcpn"></use></svg
                ><span class="ml-2 caption">{{
                    daily_forecast[6].pcpn
                  }}</span></span
                >
              </v-list-item>
              <v-list-item class="my-4 px-1">
                <span style="flex: 1"
                ><svg class="icon" style="font-size: 30px" aria-hidden="true">
                    <use xlink:href="#icon-pop"></use></svg
                ><span class="ml-2 caption"
                >{{ daily_forecast[6].pop }}%</span
                ></span
                >
                <span style="flex: 1"
                ><svg class="icon" style="font-size: 30px" aria-hidden="true">
                    <use xlink:href="#icon-pres"></use></svg
                ><span class="ml-1 caption"
                >{{ daily_forecast[6].pres }}hPa</span
                ></span
                >
              </v-list-item>
              <v-list-item class="my-4 px-1">
                <span style="flex: 1"
                ><svg class="icon" style="font-size: 30px" aria-hidden="true">
                    <use xlink:href="#icon-uv_index"></use></svg
                ><span class="ml-2 caption">{{
                    daily_forecast[6].uv_index
                  }}</span></span
                >
                <span style="flex: 1"
                ><svg class="icon" style="font-size: 30px" aria-hidden="true">
                    <use xlink:href="#icon-vis"></use></svg
                ><span class="ml-2 caption"
                >{{ daily_forecast[6].vis }}公里</span
                ></span
                >
              </v-list-item>
            </v-card>
          </v-list-item>
        </v-card>
        <v-card class="ml-4 mt-4">
          <v-card-title style="color:#ff1654">
            <svg
                    class="icon"
                    aria-hidden="true"
                    style="font-size: 24px;color:#ff1654"
            >
              <use xlink:href="#icon-daily"></use>
            </svg>
            小时预报
          </v-card-title>
          <v-list-item id="hourly" style="height:200px"></v-list-item>
          <v-list-item
                  style="padding-left: 70px;padding-right: 70px;margin-top: 20px"
          >
            <v-card
                    v-for="(hour, index) in hourly"
                    :key="index"
                    outlined
                    style="flex: 1;margin-left: 5px;margin-bottom: 10px"
            >
              <v-list-item class="my-4 px-1">
                <span
                        style="flex: 1;display: flex;flex-direction: column;text-align: center"
                ><svg
                        class="icon mx-auto"
                        style="font-size: 30px"
                        aria-hidden="true"
                >
                    <use xlink:href="#icon-riqing"></use></svg
                ><span class="caption">{{ hour.cond_txt }}</span></span
                >
                <span
                        style="flex: 1;display: flex;flex-direction: column;text-align: center"
                ><svg
                        class="icon mx-auto"
                        style="font-size: 30px"
                        aria-hidden="true"
                >
                    <use xlink:href="#icon-wind_dir"></use></svg
                ><span class="caption">{{ hour.wind_dir }}</span></span
                >
                <span
                        style="flex: 1;display: flex;flex-direction: column;text-align: center"
                ><svg
                        class="icon mx-auto"
                        style="font-size: 30px"
                        aria-hidden="true"
                >
                    <use xlink:href="#icon-wind_sc"></use></svg
                ><span class="caption">{{ hour.wind_sc }}级</span></span
                >
              </v-list-item>
              <v-list-item class="my-4 px-1">
                <span
                        style="flex: 1;display: flex;flex-direction: column;text-align: center"
                ><svg
                        class="icon mx-auto"
                        style="font-size: 30px"
                        aria-hidden="true"
                >
                    <use xlink:href="#icon-spd"></use></svg
                ><span class="caption">{{ hour.wind_spd }}km/h</span></span
                >
                <span
                        style="flex: 1;display: flex;flex-direction: column;text-align: center"
                ><svg
                        class="icon mx-auto"
                        style="font-size: 30px"
                        aria-hidden="true"
                >
                    <use xlink:href="#icon-hum"></use></svg
                ><span class="caption">{{ hour.hum }}%</span></span
                >
                <span
                        style="flex: 1;display: flex;flex-direction: column;text-align: center"
                ><svg
                        class="icon mx-auto"
                        style="font-size: 30px"
                        aria-hidden="true"
                >
                    <use xlink:href="#icon-pres"></use></svg
                ><span class="caption">{{ hour.pres }}hPa</span></span
                >
              </v-list-item>
              <v-list-item class="my-4 px-1">
                <span
                        style="flex: 1;display: flex;flex-direction: column;text-align: center"
                ><svg
                        class="icon mx-auto"
                        style="font-size: 30px"
                        aria-hidden="true"
                >
                    <use xlink:href="#icon-pop"></use></svg
                ><span class="caption">{{ hour.pop }}%</span></span
                >
                <span
                        style="flex: 1;display: flex;flex-direction: column;text-align: center"
                ><svg
                        class="icon mx-auto"
                        style="font-size: 30px"
                        aria-hidden="true"
                >
                    <use xlink:href="#icon-dew"></use></svg
                ><span class="caption">{{ hour.dew }}°C</span></span
                >
                <span
                        style="flex: 1;display: flex;flex-direction: column;text-align: center"
                ><svg
                        class="icon mx-auto"
                        style="font-size: 30px"
                        aria-hidden="true"
                >
                    <use xlink:href="#icon-cloud"></use></svg
                ><span class="caption">{{ hour.cloud }}</span></span
                >
              </v-list-item>
            </v-card>
          </v-list-item>
        </v-card>
      </v-col>
    </v-row>
  </v-app>
</template>

<script data-search-pseudo-elements>
export default {
  name: "App",
  components: {},
  data: () => ({
    weather: {},
    hour: {},
    weather_option: {},
    hour_option: {},
    basic: {},
    update: {},
    weather_now: {},
    air_now: {},
    daily_forecast: [{}, {}, {}, {}, {}, {}, {}],
    hourly: [{}, {}, {}, {}, {}, {}, {}, {}],
    lifestyle: [{}, {}, {}, {}, {}, {}, {}, {}],
    life: {
      comf: "舒适度指数",
      cw: "洗车指数",
      drsg: "穿衣指数",
      flu: "感冒指数",
      uv: "紫外线指数",
      trav: "旅游指数",
      sport: "运动指数",
      air: "空气污染扩散指数"
    }
  }),
  created() {
    this.axios
            .get(
                    "https://free-api.heweather.net/s6/weather/now?location=beijing&key=833c633ea91e4a97a0561a732b39cd1e"
            )
            .then(response => {
              this.basic = response.data.HeWeather6[0].basic;
              this.update = response.data.HeWeather6[0].update;
              this.weather_now = response.data.HeWeather6[0].now;
            });
    this.axios
            .get(
                    "https://free-api.heweather.net/s6/air/now?location=beijing&key=833c633ea91e4a97a0561a732b39cd1e"
            )
            .then(response => {
              this.air_now = response.data.HeWeather6[0].air_now_city;
            });
    this.axios
            .get(
                    "https://free-api.heweather.net/s6/weather/forecast?location=beijing&key=833c633ea91e4a97a0561a732b39cd1e"
            )
            .then(response => {
              this.daily_forecast = response.data.HeWeather6[0].daily_forecast;
            });
    this.axios
            .get(
                    "https://free-api.heweather.net/s6/weather/hourly?location=beijing&key=833c633ea91e4a97a0561a732b39cd1e"
            )
            .then(response => {
              this.hourly = response.data.HeWeather6[0].hourly;
            });
    this.axios
            .get(
                    "https://free-api.heweather.net/s6/weather/lifestyle?location=beijing&key=833c633ea91e4a97a0561a732b39cd1e"
            )
            .then(response => {
              this.lifestyle = response.data.HeWeather6[0].lifestyle;
            });
  },
  mounted() {
    this.weather = this.$echarts.init(
            document.getElementById("weather"),
            "light"
    );
    this.weather_option = {
      title: {},
      grid: {
        bottom: 20
      },
      tooltip: {
        trigger: "axis"
      },
      legend: {
        data: ["最高气温", "最低气温"]
      },
      xAxis: {
        type: "category",
        axisLine: {
          show: false
        },
        axisTick: {
          length: 0
        },
        boundaryGap: false,
        data: []
      },
      yAxis: {
        scale: true, //纵坐标起始点根据最低值变化
        type: "value",
        axisLine: {
          show: false
        },
        axisTick: {
          length: 0
        },
        axisLabel: {
          formatter: "{value}°"
        }
      },
      series: [
        {
          name: "最高气温",
          type: "line",
          data: [],
          markPoint: {
            data: [
              {
                type: "max",
                name: "最大值"
              }
            ]
          },
          markLine: {
            data: [
              {
                type: "average",
                name: "平均值"
              }
            ]
          }
        },
        {
          name: "最低气温",
          type: "line",
          data: [],
          markPoint: {
            data: [
              {
                type: "min",
                name: "最小值"
              }
            ]
          },
          markLine: {
            data: [
              {
                type: "average",
                name: "平均值"
              }
            ]
          }
        }
      ]
    };
    this.weather.setOption(this.weather_option);
    this.weather.showLoading();
    this.hour = this.$echarts.init(document.getElementById("hourly"), "light");
    this.hour_option = {
      title: {},
      grid: {
        bottom: 20
      },
      tooltip: {
        trigger: "axis"
      },
      legend: {
        data: ["逐时气温"]
      },
      xAxis: {
        type: "category",
        axisLine: {
          show: false
        },
        axisTick: {
          length: 0
        },
        boundaryGap: false,
        data: []
      },
      yAxis: {
        scale: true, //纵坐标起始点根据最低值变化
        type: "value",
        axisLine: {
          show: false
        },
        axisTick: {
          length: 0
        },
        axisLabel: {
          formatter: "{value}°"
        }
      },
      series: [
        {
          name: "逐时气温",
          type: "line",
          data: [],
          markPoint: {
            data: [
              {
                type: "max",
                name: "最大值"
              }
            ]
          }
        }
      ]
    };
    this.hour.setOption(this.hour_option);
    this.hour.showLoading();
  },
  watch: {
    daily_forecast() {
      let temp = this.daily_forecast;
      this.weather.setOption({
        xAxis: {
          data: [
            "今天",
            temp[1].date.slice(5, 10),
            temp[2].date.slice(5, 10),
            temp[3].date.slice(5, 10),
            temp[4].date.slice(5, 10),
            temp[5].date.slice(5, 10),
            temp[6].date.slice(5, 10)
          ]
        },
        series: [
          {
            name: "最高气温",
            data: [
              temp[0].tmp_max,
              temp[1].tmp_max,
              temp[2].tmp_max,
              temp[3].tmp_max,
              temp[4].tmp_max,
              temp[5].tmp_max,
              temp[6].tmp_max
            ]
          },
          {
            name: "最低气温",
            data: [
              temp[0].tmp_min,
              temp[1].tmp_min,
              temp[2].tmp_min,
              temp[3].tmp_min,
              temp[4].tmp_min,
              temp[5].tmp_min,
              temp[6].tmp_min
            ]
          }
        ]
      });
      this.weather.hideLoading();
    },
    hourly() {
      let hour_temp = this.hourly;
      this.hour.setOption({
        xAxis: {
          data: [
            hour_temp[0].time.slice(11, 16),
            hour_temp[1].time.slice(11, 16),
            hour_temp[2].time.slice(11, 16),
            hour_temp[3].time.slice(11, 16),
            hour_temp[4].time.slice(11, 16),
            hour_temp[5].time.slice(11, 16),
            hour_temp[6].time.slice(11, 16),
            hour_temp[7].time.slice(11, 16)
          ]
        },
        series: [
          {
            name: "逐时气温",
            data: [
              hour_temp[0].tmp,
              hour_temp[1].tmp,
              hour_temp[2].tmp,
              hour_temp[3].tmp,
              hour_temp[4].tmp,
              hour_temp[5].tmp,
              hour_temp[6].tmp,
              hour_temp[7].tmp
            ]
          }
        ]
      });
      this.hour.hideLoading();
    }
  }
};
</script>

<style lang="scss" scoped>
  .icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
  }
</style>
